/*
 * @Author: qiuziz
 * @Date: 2017-08-16 11:21:42
 * */


import React, { Component } from 'react';
import { Flex, Button, InputItem, Toast } from 'antd-mobile';
import './index.scss';
import { Resource } from '../../service/resource';
import BrowserUtils from '../../service/history';
import LocalStorage from '../../service/LocalStorage';

export default class UserInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        userName: '',
        nickName: '',
        passWord: ''
      },
      newPwd: '',
      rePwd: ''
    }
  }
  componentDidMount() {
    const user = LocalStorage.getItem('user') || {};
    Resource.getOneUser.get({id: user.id}).then(res => {
      this.setState({user: res})
    }).catch(err => {
      console.log(err)
    })
  }

  editInfo(value, type) {
    const { user } = this.state;
    if (type === 'newPwd' || type === 'rePwd') {
      this.setState({[type]: value});
      return;
    }
    if (type === 'nickName') {
      user.nickName = value;
    }
    if (type === 'userName') {
      user.userName = value;
    }
    if (type === 'role') {
      user.role = value ? 1 : 0;
    }
    this.setState({user});

  }

  updateInfo() {
    const { user, newPwd, rePwd } = this.state;
    if (newPwd && rePwd && newPwd === rePwd) {
      user.passWord = rePwd;
    }
    Resource.updateUser.post(null, user).then(res => {
      if(res && res.result === 1) {
        Toast.success('修改成功', 2);
        BrowserUtils.goBack();
      }
    }).catch(err => {
      console.log(err);
      Toast.fail('修改失败', 2);
    })
  }
  loginOut() {
    LocalStorage.removeItem('user');
    LocalStorage.removeItem('projectOptions');
    BrowserUtils.replace({pathname: '/login'});
  }

  render() {
    const { user, newPwd, rePwd } = this.state;
    return (
      <Flex className="userinfo" direction="column" align="start">
        <Flex className="content" direction="column" align="center">
          <Flex className="inputItem" justify="between">
            <Flex.Item className="label">用户名：</Flex.Item>
            <InputItem 
              className="input"
              value={user.userName}
              placeholder="请输入用户名"
              editable={false}
              onChange={value => this.editInfo(value, 'userName')}
              />
            </Flex>
            <Flex className="inputItem" justify="between">
              <Flex.Item className="label">密码：</Flex.Item>
              <InputItem
                className="input"
                type="password"
                value={newPwd}
                clear
                placeholder="请输入密码"
                onChange={value => this.editInfo(value, 'newPwd')}
                />
            </Flex>
            <Flex className="inputItem" justify="between">
              <Flex.Item className="label">确认密码：</Flex.Item>
              <InputItem
                className="input"
                type="password"
                value={rePwd}
                clear
                placeholder="确认密码"
                onChange={value => this.editInfo(value, 'rePwd')}
              />
            </Flex>
            <Flex className="inputItem" justify="between">
              <Flex.Item className="label">昵称：</Flex.Item>
              <InputItem
                className="input"
                clear
                value={user.nickName}
                placeholder="请输入昵称"
                onChange={value => this.editInfo(value, 'nickName')}
              />
            </Flex>
            <Flex className="inputItem" justify="around">
              <Button className="btn" type="primary" onTouchTap={() => this.updateInfo()}>修改</Button>
              <Button className="btn" type="warning" onTouchTap={() => this.loginOut()}>注销</Button>
            </Flex>
          </Flex>
      </Flex>
    );
  }
}

